{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 1200px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        text-align: center;
    }
    .sortable {
        cursor: pointer;
    }
    .filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .label {
        display: inline-block;
        margin: 0 2px;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
    }
    .label-success {
        background-color: #4CAF50;
        color: white;
    }
    .label-danger {
        background-color: #f44336;
        color: white;
    }
    .label-default {
        background-color: #9E9E9E;
        color: white;
    }
    .search-container .form-control {
        width: 34px;  /* 宽度与高度相等，实现正方形 */
        height: 34px; /* 固定高度，与按钮保持一致 */
        padding: 0 12px; /* 调整内边距避免内容溢出 */
    }
    .search-container .input-group-btn .btn {
        height: 34px; /* 与搜索框高度完全一致 */
    }
</style>
<script>
    // 全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selall = document.getElementById('selall');
        const checkboxes = document.querySelectorAll('input[name="ids"]');
        
        const timeInput = document.querySelector('input[name="recommendation_time"]');
        const form = document.querySelector('form');
        
        // 提交时：将T替换为空格
        if (form && timeInput) {
            form.addEventListener('submit', function(e) {
                if (timeInput.value) {
                    timeInput.value = timeInput.value.replace('T', ' ');
                }
            });

        selall.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    }
    
    function doDel(url) {
        if (confirm("确定删除该推荐记录吗？")) {
            window.location.href = url;
        }
    }
});
</script>
<section class="content-header">
    <h1>推荐管理 <small>推荐记录列表</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">推荐管理</a></li>
        <li class="active">推荐记录列表</li>
    </ol>
</section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">推荐记录列表</h3>
        </div>
        <div class="box-body">
            <div class="filter-group">
                <!-- 新增按钮 -->
                <button type="button" class="btn btn-default">
                    <a href="{% url 'myadmin_recommendations_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加推荐记录</a>
                </button>
                
                <!-- 筛选和搜索表单 -->
                <form action="{% url 'myadmin_recommendations_index' 1 %}" method="get" class="form-inline">
                    <!-- 推荐类型筛选 -->
                    <select name="recommendation_type" class="form-control input-sm" onchange="this.form.submit()">
                        <option value="">所有类型</option>
                        {% for type in type_choices %}
                        <option value="{{ type.0 }}" {% if selected_type == type.0 %}selected{% endif %}>
                            {{ type.1 }}
                        </option>
                        {% endfor %}
                    </select>
                    
                    <!-- 推荐依据筛选 -->
                    <select name="based_on" class="form-control input-sm" onchange="this.form.submit()">
                        <option value="">所有依据</option>
                        {% for based in based_choices %}
                        <option value="{{ based.0 }}" {% if selected_based == based.0 %}selected{% endif %}>
                            {{ based.1 }}
                        </option>
                        {% endfor %}
                    </select>
                    
                    <!-- 接受状态筛选 -->
                    <select name="is_accepted" class="form-control input-sm" onchange="this.form.submit()">
                        <option value="">所有状态</option>
                        <option value="True" {% if selected_accepted == 'True' %}selected{% endif %}>已接受</option>
                        <option value="False" {% if selected_accepted == 'False' %}selected{% endif %}>已拒绝</option>
                        <option value="None" {% if selected_accepted == 'None' %}selected{% endif %}>未处理</option>
                    </select>
                    
                    <!-- 搜索框 -->
                    <div class="input-group input-sm search-container" style="margin-left: 10px; width: 200px;">
                        <input type="text" name="keyword" class="form-control" placeholder="搜索用户/内容" 
                               value="{{ request.GET.keyword|default:'' }}">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="table-box">
                <table class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selall"></th>
                            <th class="sortable">
                                <a href="?sort=recommendation_id&order={% if request.GET.sort == 'recommendation_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    记录ID{% if request.GET.sort == 'recommendation_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=user__username&order={% if request.GET.sort == 'user__username' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    用户名{% if request.GET.sort == 'user__username' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=recommendation_type&order={% if request.GET.sort == 'recommendation_type' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    推荐类型{% if request.GET.sort == 'recommendation_type' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=based_on&order={% if request.GET.sort == 'based_on' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    推荐依据{% if request.GET.sort == 'based_on' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>推荐内容</th>
                            <th class="sortable">
                                <a href="?sort=is_accepted&order={% if request.GET.sort == 'is_accepted' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    接受状态{% if request.GET.sort == 'is_accepted' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>反馈</th>
                            <th class="sortable">
                                <a href="?sort=recommendation_time&order={% if request.GET.sort == 'recommendation_time' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    推荐时间{% if request.GET.sort == 'recommendation_time' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in recordlist %}
                        <tr>
                            <td><input type="checkbox" name="ids" value="{{ vo.recommendation_id }}"></td>
                            <td>{{ vo.recommendation_id }}</td>
                            <td>{{ vo.user.username }}</td>
                            <td>
                                {% for type in type_choices %}
                                    {% if type.0 == vo.recommendation_type %}{{ type.1 }}{% endif %}
                                {% endfor %}
                            </td>
                            <td>
                                {% for based in based_choices %}
                                    {% if based.0 == vo.based_on %}{{ based.1 }}{% endif %}
                                {% endfor %}
                            </td>
                            <td>{{ vo.content|truncatechars:20 }}</td>
                            <td>
                                {% if vo.is_accepted == True %}
                                    <span class="label label-success">已接受</span>
                                {% elif vo.is_accepted == False %}
                                    <span class="label label-danger">已拒绝</span>
                                {% else %}
                                    <span class="label label-default">未处理</span>
                                {% endif %}
                            </td>
                            <td>{{ vo.feedback|default:'-'|truncatechars:10 }}</td>
                            <td>{{ vo.recommendation_time|date:"Y-m-d H:i:s" }}</td>
                            <td>
                                <a href="{% url 'myadmin_recommendations_edit' vo.recommendation_id %}" class="btn btn-xs btn-primary">编辑</a>
                                <a onclick="doDel('{% url 'myadmin_recommendations_delete' vo.recommendation_id %}')" class="btn btn-xs btn-danger">删除</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="10">暂无推荐记录数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_recommendations_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist %}
                        <li {% if p == pIndex %}class="active"{% endif %}>
                            <a href="{% url 'myadmin_recommendations_index' p %}?{{ request.GET.urlencode }}">{{ p }}</a>
                        </li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_recommendations_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}